<template>
  <!--视图-->
  <div>

 {{dictType}}
    <el-button @click="toAdd" type="primary" size="small" plain icon="el-icon-plus">新增</el-button>
    <el-button :disabled="updateFlag" type="success" size="small" plain @click="selectById" icon="el-icon-edit">修改</el-button>
    <el-button :disabled="delFlag" type="danger" size="small" plain @click="delAll" icon="el-icon-delete">删除</el-button>
    <el-button @click="derive" type="warning" size="small" plain icon="el-icon-download">导出</el-button>
    <el-button type="danger" size="small" plain icon="el-icon-refresh">刷新缓存</el-button>
    <el-button style="margin-left: 900px" size="mini" @click="hidden" icon="el-icon-search" circle></el-button>
    <el-button size="mini" @click="refresh" icon="el-icon-refresh" circle></el-button>

    <el-table
        :data="tableData"
        style="width: 100%"
        align="center"
        @selection-change="selectionChange"
        v-loading="loadFlag">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="cropId"
          label="农作物编号"
          width="180">
      </el-table-column>
      <el-table-column
          value-format="yyyy-MM-dd HH:mm:ss"
          prop="plantingDate"
          label="种植日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="growthStage"
          label="生长阶段"
          width="180"
        >
      </el-table-column>
      <el-table-column
          prop="temperature"

          label="温度"
          width="180">

      </el-table-column>
      <el-table-column
          prop="humidity"
          label="湿度"
          width="180">
      </el-table-column>
      <el-table-column
          prop="soilPh"
          label="土壤pH值"
          width="180">
      </el-table-column>
      <el-table-column

          label="省市县"
          width="180">
        <template v-slot="s">
          {{s.row.provincename}}/{{s.row.cityname}}/{{s.row.districtname}}
        </template>
      </el-table-column>

      <el-table-column
          value-format="yyyy-MM-dd HH:mm:ss"
          prop="recordedAt"
          label="记录时间"
          width="180">
      </el-table-column>
      <el-table-column
          label="操作"
          width="180">
        <template v-slot="s">
          <el-button style="color: dodgerblue;border: none" size="small" @click="toUpdate(s.row)" icon="el-icon-edit">修改</el-button>
          <el-button style="color: dodgerblue;border: none" size="small" @click="del(s.row.cropId)" icon="el-icon-delete">删除</el-button>

        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="添加字典类型" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="农作物id" :label-width="formLabelWidth" prop="cropId">
          <el-input v-model="form.cropId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="种植日期" :label-width="formLabelWidth" prop="plantingDate">
          <el-col :span="11">
            <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.plantingDate" style="width: 100%;"></el-date-picker>
          </el-col>


        </el-form-item>
        <el-form-item label="生长阶段" :label-width="formLabelWidth" prop="growthStage">
          <el-input v-model="form.growthStage" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="温度" :label-width="formLabelWidth" prop="temperature">
          <el-input v-model="form.temperature" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="湿度" prop="humidity">
          <el-input v-model="form.humidity" autocomplete="off"></el-input>
          <el-form-item label="土壤ph值" :label-width="formLabelWidth" prop="soilPh">
            <el-input v-model="form.soilPh" autocomplete="off"></el-input>
          </el-form-item>
        </el-form-item >
        <el-form-item label="省市区" :label-width="formLabelWidth" prop="value">
          <el-cascader
              v-model="value"
              :options="options"
              @change="handleChange"
              :props="prop"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="基地名字" :label-width="formLabelWidth" prop="baseName">
          <el-input v-model="form.baseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="面积" :label-width="formLabelWidth" prop="area">
          <el-input v-model="form.area" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">确 定</el-button>


      </div>
    </el-dialog>

    <el-dialog title="修改字典类型" :visible.sync="dialogUpdateVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="isDisabled">
        <el-form-item label="农作物id" :label-width="formLabelWidth" prop="cropId">
          <el-input v-model="form.cropId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="种植日期" :label-width="formLabelWidth" prop="plantingDate">
          <el-col :span="11">
            <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.plantingDate" style="width: 100%;"></el-date-picker>
          </el-col>


        </el-form-item>
        <el-form-item label="生长阶段" :label-width="formLabelWidth" prop="growthStage">
          <el-input v-model="form.growthStage" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="温度" :label-width="formLabelWidth" prop="temperature">
          <el-input v-model="form.temperature" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="湿度" prop="humidity">
          <el-input v-model="form.humidity" autocomplete="off"></el-input>

        </el-form-item >
        <el-form-item label="土壤ph值" :label-width="formLabelWidth" prop="soilPh">
          <el-input v-model="form.soilPh" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="省市区" :label-width="formLabelWidth" >
          <el-cascader
              v-model="value"
              :options="options"
              @change="handleChange"
              :props="prop"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="基地名字" :label-width="formLabelWidth" prop="baseName">
          <el-input v-model="form.baseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="面积" :label-width="formLabelWidth" prop="area">
          <el-input v-model="form.area" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="update('ruleForm')">修改</el-button>
      </div>
    </el-dialog>

    <el-pagination
        @size-change="goSize"
        @current-change="goPage"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-bottom: -100px"
        align="right">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "ArgpCropsGrowthView",
  data() {//属性
    return {
      tableData: [],
      form:{},
      value: [],
      options: [],
      prop:{
        label:'name',
        value:'id'
      },
      pageNum: 1,
      pageSize: 5,
      total: 0,
      selectedIds: [],
      dialogFormVisible: false,
      dialogUpdateVisible: false,
      formLabelWidth: '120px',
      addForm: {},
      imageUrl:'',
      headImg:"",
      updateForm: {},
      updateFlag: true,
      delFlag: true,
      flag: false,
      loadFlag: false,
      betweenCreatTimeBetween:[],
      cropId:localStorage.getItem("dictType"),
      formInline: {},
      rules: {
        cropId: [
          {required: true, message: '请输入农作物id', trigger: 'blur'},
        ],
        plantingDate: [
          {required: true, message: '请输入种植时间', trigger: 'blur'},
        ],
        growthStage: [
          {required: true, message: '请输入生长阶段', trigger: 'blur'},
        ],
        temperature: [
          {required: true, message: '请输入温度', trigger: 'blur'},
        ],
        soilPh: [
          {required: true, message: '请输入Ph值', trigger: 'blur'},
        ]
        ,
        value: [
          {required: true, message: '请输入省市县', trigger: 'blur'},
        ]
        ,

        baseName: [
          {required: true, message: '请输入基地名字', trigger: 'blur'},
        ]
        ,
        area: [
          {required: true, message: '请输入面积', trigger: 'blur'},
        ]

      }
    };
  }, methods: {//自定义方法
    handleChange(value){
      console.log(value);
      if(value.length>0){
        console.log("有值");
        this.form.provinceId=value[0];
        this.form.cityId=value[1];
        this.form.districtId=value[2];
        console.log(  this.form.provinceId);
        console.log(  this.form.cityId);
        console.log(  this.form.districtId);
      }
    },

    handleAvatarSuccess(res, file) {

      this.imageUrl = URL.createObjectURL(file.raw);
      if(res.code==1001){
        this.addForm.headImg=res.url;
        console.log(res.url);
      }



    },
    beforeAvatarUpload(file) {
      console.log(file)
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      //
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return true;
    },
    refresh() {
      this.loadFlag = true;
      setTimeout(() => {
        this.loadFlag = false;
      }, 500);
    },
    hidden() {
      this.flag=!this.flag;
    },
    derive() {
      window.location.href="http://localhost:9017/system/sysDictType/download";
    },
    getCity(){
      this.axios.get("system/ArgpCrops/Citylist").then(res=>{
        this.options=res.data
        console.log(this.options)
      })
    },
    update() {
      this.axios.post("/system/ArgpCrops/listgrowthupdate",this.form).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg);
          this.dialogUpdateVisible = false;
          this.getDictTypeList();
        }else {
          this.$message.error(res.data.msg);
        }
      });
    },
    toUpdate(obj) {
      this.getCity();
      this.getCity();
      this.getCity();
      this.form=obj;
      this.value=[obj.provinceId,obj.cityId,obj.districtId]
      console.log(this.value)
      this.imageUrl=obj.headImg;
      this.dialogUpdateVisible=true;
    },
    selectById() {
      let id = null;
      this.selectedIds.forEach(item=> {
        id=item.dictId;
      });
      this.axios.get("/system/dictType/selectById?id=" + id).then(res => {
        this.updateForm=res.data.data;
        this.dialogUpdateVisible=true;
      });
    },
    del(cropId) {

      this.axios.post("/system/ArgpCrops/del?cropId="+cropId).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.getDictTypeList();
        }else {
          this.$message.error(res.data.msg)
        }
      });
    },
    delAll() {
      let dictTypeIdList = Array();
      this.selectedIds.forEach(item => {
        dictTypeIdList.push(item.dictId)
      });
      this.axios.post("/system/dictType/del?dictTypeIdList=" + dictTypeIdList).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.getDictTypeList();
        }else {
          this.$message.error(res.data.msg)
        }
      });
    },
    add() {

      this.axios.post("/system/ArgpCrops/listgrowthadd", this.form).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg);
          this.dialogFormVisible = false;
          this.getDictTypeList();
        }else {
          this.$message.error(res.data.msg);
        }
      });
    },
    toAdd() {
      this.form = {};
      this.imageUrl={};
      this.dialogFormVisible = true;
    },
    selectionChange(val) {
      this.selectedIds=val;
      console.log(this.selectedIds)
      if (this.selectedIds.length == 1) {
        this.updateFlag=false;
      }else {
        this.updateFlag=true;

      }
      if (this.selectedIds.length != 0) {
        this.delFlag = false;
      } else {
        this.delFlag = true;
      }
    },
    goSize(size) {
      this.pageSize=size;
      this.getDictTypeList();
    },
    goPage(page) {
      this.pageNum=page;
      this.getDictTypeList();
    },
    dateFormat() {
      if (this.betweenCreatTimeBetween!=undefined) {
        for (let i = 0; i < this.betweenCreatTimeBetween.length; i++) {
          this.formInline.beginTime=this.betweenCreatTimeBetween[0]
          this.formInline.endTime=this.betweenCreatTimeBetween[1]
        }
      }
    },
    getDictTypeList() {
      this.dateFormat();
      this.axios.post("/system/ArgpCrops/listgrowth?pageNum=" + this.pageNum+"&pageSize="+this.pageSize+"&cropId="+this.cropId).then(res => {
        this.tableData=res.data.list;
        this.total=res.data.total;
      });
    },
    reset() {
      window.location.reload();
    },
  }, created() {
    this.getDictTypeList();
    this.getCity();

    this.getDictTypeList();
    this.getDictTypeList();
    this.getDictTypeList();

  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>